<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>锋迷商城 - 用户中心</title>
		<link rel="shortcut icon" href="/img/foodie.ico">

		<link href="static/css/admin.css" rel="stylesheet" type="text/css">
		<link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="static/css/personal.css" rel="stylesheet" type="text/css">
		<link href="static/css/systyle.css" rel="stylesheet" type="text/css">

	</head>

	<body>
		<div id="div1">

		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd">
						<div class="logoBig">
							<li><img src="static/images/logobig.png" style="height: 50px;"/></li>
						</div>
					</div>
				</div>
			</ul>
      <ul class="message-r">
        <div class="topMessage home">
          <div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
        </div>
        <div class="topMessage my-shangcheng">
          <div class="menu-hd MyShangcheng"><a href="user-center.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
          </div>
        </div>
        <div class="topMessage mini-cart">
          <div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i
            class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                  class="h">0</strong></a></div>
        </div>
        <div class="topMessage favorite">
          <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
          </div>
        </div>
      </ul>
		</div>
		<div id="center">
			<b class="line"></b>
			<div class="center">
				<div class="col-main">
					<div class="main-wrap">
						<div class="wrap-left">
							<div class="wrap-list">
								<div class="m-user">
									<div class="m-bg"></div>
									<div class="m-userinfo">
										<div class="m-baseinfo">
											<a href="userinfo.html"><img :src="'static/' + userImg"></a> <em class="s-name">{{ username }}</em></div>
									</div>
								</div>
								<iframe name="mainFrame" width="100%" height="600" src="user-orderlist.html" scrolling="no" frameborder="0"></iframe>
							</div>
						</div>
						<div class="wrap-right">
							<div class="day-list">
								<div class="s-bar">
									<a href="#" class="i-history-trigger s-icon"></a>小日历
								</div>
								<div class="s-care s-care-noweather">
									<div class="s-date"><em></em> <span></span> <span></span></div>
								</div>
							</div>
						</div>
					</div>
				<div class="footer">
					<div class="footer-hd">
						<p>
							<a href="#">锋迷商城</a>
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							<a href="#">关于千锋</a>
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>©qfedu.com 版权所有</em>
						</p>
					</div>
				</div>
				</div>
				<aside class="menu">
					<ul>
						<li class="person active"><span style="font-weight: bold;"><a href="/index.html">用户中心</a></span></li>
						<li class="person">
							<a href="#">个人资料</a>
							<ul>
								<li>
									<a href="user-info.html" target="mainFrame">我的信息</a>
								</li>
								<li>
									<a href="user-address.html"  target="mainFrame">收货地址</a>
								</li>
							</ul>
						</li>
						<li class="person">
							<a href="#">我的交易</a>
							<ul>
								<li>
									<a href="user-orderlist.html"  target="mainFrame">订单管理</a>
								</li>
								<li>
									<a href="user-comment.html"  target="mainFrame">我的评价</a>
								</li>
							</ul>
						</li>
					</ul>
				</aside>
			</div>
		</div>
    </div>
    <script type="text/javascript" src="static/js/cookie-utils.js" ></script>
    <script type="text/javascript" src="static/js/vue.js" ></script>
    <script type="text/javascript" src="static/js/axios.min.js" ></script>
    <script type="text/javascript" src="static/js/base.js"></script>

    <script type="text/javascript">
      var baseUrl = "http://localhost:8080";
      // var baseUrl = "http://47.113.207.152:8080";

      var vm = new Vue({
        el: "#div1",
        data: {
          token: "",
          username: "",
          userImg: ""
        },
        created() {
          //从cookie中获取用户信息（token，用户id，用户名，头像）
          this.token = getCookieValue("token")
          if (this.token == null || this.token == "") {
            window.location.href = "login.html?returnUrl=user-center.html"
          } else {
            // 已经登录，但是如果登录token过期，则需要重新登录，因此需要创建一个校验用户登录的接口，通过请求这个接口进行token的校验
            // user/checkToken
            // 只要登陆过就允许显示用户名和头像，但是如果要进一步操作，就需要去验证是否登录过期(懒校验)
            var url1 = baseUrl + "/user/checkToken"
            axios({
              url: url1,
              method: "get",
              headers: {
                token: this.token
              }
            }).then(res => {
              // console.log(res.data)
              if (res.data.code == 10000) {
                //已经登录成功，且token没有过期啥的
                this.username = getCookieValue("username")
                this.userImg = getCookieValue("userImg")
              } else {
                window.location.href = "login.html?returnUrl=user-center.html"
              }
            })
          }
        }
      })
    </script>
	</body>

</html>
